
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>地球仪</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background: #000;
    }
    @keyframes runing {
      0% {
        transform: rotate(23.6deg) rotateX(-23.6deg) rotateY(0deg);
      }
      100% {
        transform: rotate(23.6deg) rotateX(-23.6deg) rotateY(360deg);
      }
    }
    .big {
      position: fixed;
      top: 50%;
      left: 50%;
      /*position: relative;*/
      width: 1000px;
      height: 1000px;
      transform: translate(-50%,-55%);
      /*background: seagreen;*/
    }
    .bigbox {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 600px;
      height: 600px;
      /*background: seagreen;*/
      transform: translate(-50%,-50%);
      perspective: 1200px;
    }
    .box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      /*background: orangered;*/
      transform-style: preserve-3d;
      animation: runing 15s linear infinite;
    }
    .box div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 50%;
    }

    .box div:nth-child(1) {

    }
    .box div:nth-child(2) {
      transform: rotateY(22.5deg);
    }
    .box div:nth-child(3) {
      transform: rotateY(45deg);
    }
    .box div:nth-child(4) {
      transform: rotateY(67.5deg);
    }
    .box div:nth-child(5) {
      transform: rotateY(90deg);
    }
    .box div:nth-child(6) {
      transform: rotateY(112.5deg);
    }
    .box div:nth-child(7) {
      transform: rotateY(135deg);
    }
    .box div:nth-child(8) {
      transform: rotateY(157.5deg);
    }
    .box div:nth-child(9) {
      transform: translateY(-300px) rotateX(90deg) scale(0);
    }
    .box div:nth-child(10) {
      transform: translateY(-225px) rotateX(90deg) scale(.66);
    }
    .box div:nth-child(11) {
      transform: translateY(-150px) rotateX(90deg) scale(.865);
    }
    .box div:nth-child(12) {
      transform: translateY(-75px) rotateX(90deg) scale(.97);
    }
    .box div:nth-child(13) {
      transform: translateY(0) rotateX(90deg) scale(1);
    }
    .box div:nth-child(14) {
      transform: translateY(75px) rotateX(90deg) scale(.97);
    }
    .box div:nth-child(15) {
      transform: translateY(150px) rotateX(90deg) scale(.865);
    }
    .box div:nth-child(16) {
      transform: translateY(225px) rotateX(90deg) scale(.66);
    }
    .box div:nth-child(17) {
      transform: translateY(300px) rotateX(90deg) scale(0);
    }
    .but {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 3px;
      height: 680px;
      background: #fff;
      border-radius: 0;
      transform: translate(-50%,-50%) rotate(23.6deg);
    }
    .fix {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 680px;
      height: 680px;
      z-index: 99;
      /*background: seagreen;*/
      /*opacity: .5;*/
      border-radius:50%;
      border-top: 20px solid #fff;
      border-right: 20px solid #fff;
      border-left: 20px solid transparent;
      border-bottom: 20px solid transparent;
      transform: translate(-52%,-51%) rotate(68.6deg);
    }
    .foot {
      position: absolute;
      top: 850px;
      left: 50%;
      transform: translate(-50%,0);
      z-index: 3;
      width: 30px;
      height: 60px;
      background: #fff;
    }
    .footer {
      position: absolute;
      top: 765px;
      left: 50%;
      width:300px;
      height:300px;
      border:solid 1px black;
      background: #fff;
      border-radius: 50%;
      transform: translate(-50%,0) rotateX(80deg);
    }
    .footer:after{
      content: '';
      display:inline-block;
      width:300px;
      height: 320px;
      position:relative;
      opacity: 0.8;
      background: #fff;
      top:50%;
      left:-0.5px;
      border-left: 1px solid #000;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      border-bottom-left-radius: 45%;
      border-bottom-right-radius: 45%;
    }
  </style>
</head>
<body>
<div class="big">
  <div class="bigbox">
    <div class="box">

      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>

      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="but"></div>
  </div>
  <div class="fix"></div>
  <div class="foot"></div>
  <div class="footer"></div>
</div>
</body>
</html>